import React from 'react';
import { View, Text, StyleSheet, Image, TouchableOpacity, SafeAreaView, ScrollView } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { StackNavigationProp } from '@react-navigation/stack';
import { RootStackParamList } from '../navigation/types';
import { wp, hp, sp } from '../utils/layout';

type MessageScreenNavigationProp = StackNavigationProp<RootStackParamList>;

const MessageScreen = () => {
  const navigation = useNavigation<MessageScreenNavigationProp>();
  
  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.header}>
        <View style={styles.backButton}>
          {/* Empty view to maintain layout */}
        </View>
        <TouchableOpacity style={styles.settingsButton}>
          <Icon name="settings" size={24} color="#333" />
        </TouchableOpacity>
      </View>
      
      <ScrollView style={styles.content}>
        {/* 顶部信息栏 */}
        <View style={styles.userInfoSection}>
          <TouchableOpacity onPress={() => navigation.navigate('AccountLogin')}>
            <View style={styles.userInfo}>
              <Image
                source={{ uri: 'https://c-ssl.dtstatic.com/uploads/item/201909/28/20190928002504_bybhl.thumb.400_0.jpg'}} // 这里替换成真实头像地址
                style={styles.avatar}
              />
              <View style={styles.userDetails}>
                <Text style={styles.name}>章小雨</Text>
                <View style={styles.points}>
                  <Image
                    source={{ uri: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.LxThE_1ef4g7XpsLcKHcjQAAAA?cb=iwc2&rs=1&pid=ImgDetMain' }} // 积分图标地址
                    style={styles.pointIcon}
                  />
                  <Text style={styles.pointNum}>10</Text>
                </View>
              </View>
            </View>
          </TouchableOpacity>
          <TouchableOpacity onPress={() => navigation.navigate('Health')}>
            <Text style={styles.warning}>健康预警</Text>
          </TouchableOpacity>
        </View>
        
        {/* 开通订阅按钮 */}
        <View style={styles.subscribeButton}>
          <View style={styles.buttonContent}>
            <Icon name="flash-on" size={22} color="#fff" />
            <View>
              <Text style={styles.buttonText}>
                开通订阅
              </Text>
              <Text style={styles.subText}>
                解锁全部高级功能
              </Text>
            </View>
          </View>
          <TouchableOpacity style={styles.ctaButton} onPress={() => navigation.navigate('Activate')}>
            <Text style={styles.ctaText}>立即开通</Text>
          </TouchableOpacity>
        </View>
        
        {/* 功能列表 */}
        <TouchableOpacity 
          style={styles.listItem}
          onPress={() => navigation.navigate('HealthReportScreen')}
        >
          <View>
            <Text style={styles.listTitle}>健康档案</Text>
            <Text style={styles.listDesc}>个人档案，过敏史、慢性病史、家族病史</Text>
          </View>
          <Icon name="keyboard-arrow-right" size={24} color="#999" />
        </TouchableOpacity>
        
        <View style={styles.subListContainer}>
          <TouchableOpacity style={styles.subListItem}>
            <Text style={styles.subListText}>门诊病历 (3)</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.subListItem}>
            <Text style={styles.subListText}>住院病历 (1)</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.subListItem}>
            <Text style={styles.subListText}>化验单 (1)</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.subListItem}>
            <Text style={styles.subListText}>检查报告 (3)</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.subListItem}>
            <Text style={styles.subListText}>体检报告 (1)</Text>
          </TouchableOpacity>
        </View>
        
        <TouchableOpacity style={styles.listItem}>
          <Text style={styles.listTitle}>我的用药</Text>
          <Icon name="keyboard-arrow-right" size={24} color="#999" />
        </TouchableOpacity>
        
        <TouchableOpacity style={styles.listItem}>
          <Text style={styles.listTitle}>设备管理</Text>
          <Icon name="keyboard-arrow-right" size={24} color="#999" />
        </TouchableOpacity>
        
        <TouchableOpacity style={styles.listItem}>
          <Text style={styles.listTitle}>分享</Text>
          <Icon name="keyboard-arrow-right" size={24} color="#999" />
        </TouchableOpacity>
        
        <TouchableOpacity style={styles.listItem}>
          <Text style={styles.listTitle}>关于我们</Text>
          <Icon name="keyboard-arrow-right" size={24} color="#999" />
        </TouchableOpacity>
        
        <TouchableOpacity style={styles.listItem}>
          <Text style={styles.listTitle}>反馈</Text>
          <Icon name="keyboard-arrow-right" size={24} color="#999" />
        </TouchableOpacity>
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f4f4f4',
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: wp(15),
    paddingVertical: hp(10),
    backgroundColor: '#fff',
  },
  backButton: {
    padding: wp(5),
  },
  settingsButton: {
    padding: wp(5),
  },
  content: {
    flex: 1,
  },
  userInfoSection: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 20,
    backgroundColor: '#fff',
  },
  userInfo: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  avatar: {
    width: 50,
    height: 50,
    borderRadius: 25,
  },
  userDetails: {
    marginLeft: 10,
  },
  name: {
    fontSize: 18,
    fontWeight: 'bold',
  },
  points: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 5,
  },
  pointIcon: {
    width: 20,
    height: 20,
    marginRight: 5,
  },
  pointNum: {
    fontSize: 16,
  },
  warning: {
    fontSize: 16,
    color: '#1E90FF',
  },
  subscribeButton: {
    backgroundColor: '#1E90FF',
    padding: 15,
    margin: 10,
    marginTop: hp(10),
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  buttonContent: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  buttonIcon: {
    width: 30,
    height: 30,
    marginRight: 10,
  },
  buttonText: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#fff',
  },
  subText: {
    fontSize: 14,
    color: '#fff',
    marginLeft: 5,
  },
  ctaButton: {
    backgroundColor: '#7B68EE',
    paddingHorizontal: wp(15),
    paddingVertical: hp(6),
    borderRadius: wp(20),
  },
  ctaText: {
    color: 'white',
    fontWeight: 'bold',
    fontSize: sp(14),
  },
  listItem: {
    padding: 20,
    borderBottomWidth: 0.5,
    borderBottomColor: '#eee',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  listTitle: {
    fontSize: 16,
  },
  listDesc: {
    fontSize: 12,
    color: '#999',
    marginTop: 5,
  },
  subListContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    padding: 10,
    backgroundColor: '#fff',
  },
  subListItem: {
    backgroundColor: '#E6F2FF',
    borderRadius: wp(20),
    paddingHorizontal: wp(15),
    paddingVertical: hp(5),
    margin: wp(5),
  },
  subListText: {
    fontSize: 14,
    color: '#1E90FF',
  },
});

export default MessageScreen; 